<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
    <transition name="slide-right">
        <v-touch class="content-cyan" v-on:swiperight="" style="overflow: hidden">
            <div class="transfer-detail-title">
                <span class="title-left mui-icon mui-icon-back" @click="backRoute()"></span>
                <span>{{ $t('m.wallet.transaction.detail.listTitle') }}</span>

                <span class="title-right"><!--TODO
                <img src="@/assets/img/upload.png" alt="">--></span>
            </div>
            <div class="content-transfer">
                <div class="transfer-success">
                    <template v-if="obj.isError == 0">
                        <div class="success-img"><img src="@/assets/img/gou.png" alt=""></div>
                        <div class="success-text">{{ $t('m.component.alert_shot.prompt1[3]') }}</div>
                    </template>
                    <template v-else>
                        <div class="success-img"><img src="@/assets/img/coffer/prohibit.jpg" alt=""></div>
                        <div class="success-text">{{ $t('m.wallet.transaction.detail.prompt[0]') }}</div>
                    </template>
                    <div class="success-time">{{ obj.timeStamp | time2Date() }}</div>
                </div>
                <div class="transfer-detail">
                    <div class="detail-transfer-money">
                        <div>{{ $t('m.wallet.transaction.detail.prompt[1]') }}</div>
                        <div>{{ obj.value | roundOff(4) }} ETSC</div>
                    </div>
                    <div class="detail-transfer-cost">
                        <div>{{ $t('m.wallet.transaction.detail.prompt[2]') }}</div>
                        <div>
                            <div>{{ obj.gasPrice * obj.gasUsed / 10 ** 18}} ETSC</div>
                            <div>=Gas({{obj.gasUsed}})*GasPrice({{obj.gasPrice / 10 ** 9}} gwei)</div>
                        </div>
                    </div>
                    <div class="detail-tramsfer-gather">
                        <div>{{ $t('m.wallet.transaction.detail.prompt[3]') }}</div>
                        <div>
                            {{ obj.to }}
                            <img src="@/assets/img/5.png" v-clipboard:copy="obj.to"
                                 v-clipboard:success="doClipboard"
                                 v-clipboard:error="">
                        </div>
                    </div>
                    <div class="detail-transfer-pay">
                        <div>{{ $t('m.wallet.transaction.detail.prompt[4]') }}</div>
                        <div>
                            <!--<div>ETH-Wallet-2</div>-->
                            {{ obj.from }}
                            <img src="@/assets/img/5.png" v-clipboard:copy="obj.from"
                                 v-clipboard:success="doClipboard"
                                 v-clipboard:error="">
                        </div>
                    </div>
                    <!--<div>-->
                    <!--<div>备注：</div>-->
                    <!--<div></div>-->
                    <!--</div>-->
                </div>
                <div class="content-code">
                    <div class="code-title">
                        <div>
                            <div>{{ $t('m.wallet.transaction.detail.prompt[5]') }}</div>
                            <div>
                                {{ addressSub(obj.hash,5) }}
                                <img src="@/assets/img/5.png" v-clipboard:copy="obj.hash"
                                     v-clipboard:success="doClipboard"
                                     v-clipboard:error="">
                            </div>
                        </div>
                        <div>
                            <div>{{ $t('m.wallet.transaction.detail.prompt[6]') }}</div>
                            <div>{{ obj.blockNumber }}</div>
                        </div>
                    </div>
                    <div class="content-img" style="margin-left: 20px;width: 80px;">
                        <canvas id="canvas-hash"></canvas>
                    </div>
                </div>
            </div>
            <!--TODO
            <div class="content-more">
                <div>
                    <img src="@/assets/img/6.png" alt="">
                    到 ETSC 查询更详细信息>
                </div>
            </div>-->
            <Alert_little></Alert_little>

        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    import QRCode from 'qrcode';

    export default {
        name: "my_transaction_eth_detail",
        created() {
            this.obj = this.$route.query;
        },
        mounted() {
            this.showQrcode();
            this.$store.dispatch("aBackUrl", "/wallet/transaction/eth/list?isTransitionName=1");

        },
        data() {
            return {
                obj: {}
            }
        },
        methods: {
            showQrcode: function () {
                let canvas = document.querySelector('#canvas-hash');
                QRCode.toCanvas(canvas, this.obj.hash, {
                    width: 80,
                    margin: 0
                }, function (error) {
                    if (error)
                        console.log(error)
                })
            },
            doClipboard: function () {
                this.aAlert_little({
                    msg: this.$t('m.wallet.transaction.detail.prompt[7]'),
                    top: "220px"
                })
            }
        }
    }
</script>
<style scoped>
    @import '../../../../assets/css/messageDetail.css';
</style>